<template>
	<view>
		<view class="header">
			<view class="config-box">
				<view :class="temp==0?'headerTitle-selected':'headerTitle'" @click="headerClick(0)">配置</view>
				<view :class="temp==1?'headerTitle-selected':'headerTitle'" @click="headerClick(1)">综述</view>
			</view>
			<view class="share-box" v-if="temp==1">
				<image class="image-icon-class"  src="@/static/share.png"></image>
				<text>分享</text>
			</view>
		</view>
		<view class="page-view">
			<view class="pageView">
				<carConfig  v-if="temp==0" />
				<summarize v-if="temp==1" />
			</view>
		</view>
	</view>
</template>

<script>
	import carConfig from '@/pages/home/secondhandCar/carConfig/carConfig.vue';
	import summarize from '@/pages/home/secondhandCar/carConfig/summarize.vue';
	export default {
		components: {
			carConfig,summarize
		},
		data() {
			return {
				temp:0,
				dataObject: {
					"id": "7FC89D2E-44E0-518F-8DF5-41AE5D5CDA8B",
					"users_id": "510E9895-4D7E-6007-ADEB-8932689F7BFE",
					"cover_url": [
						"https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						"https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						"https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
					],
					"vin_code": "121231",
					"brand_id": "DA9A1477-5DE7-898D-AE4D-BB85B1D09AEE",
					"series_two_id": "F19556B6-2CDA-1C09-E524-87C7B26B13C4",
					"model_two_id": "6C5E8A6B-3AEB-0D7F-D8AC-7B4706A177C5",
					"appearance_name": "黑色",
					"registration_time": "2022-05-06",
					"where_city_id": "E20AD5D9-D9EB-A977-8F04-F8507DD88BF2",
					"mileage": "12.5万公里",
					"price": "20.00",
					"registration_city_id": "3A7B7BC9-F73F-5950-3EAB-7E0110B36677",
					"transfer_ownership": 1,
					"key": 2,
					"nature_id": "75C47DBF-F2A5-D571-6B62-60A0AD9133ED",
					"inspect_time": "2022-10-01",
					"insure_time": "2012-05-06",
					"describe": "描述一下",
					"owner_source_id": "ABFB4A75-73CB-C836-D577-C23B2C6EB180",
					"standard_id": "7547266D-E1D0-F3D2-4764-5D7896ABF5FE",
					"structure_id": "CB1A053B-6BEA-9C1E-DFD7-D23BA32AFFEE",
					"fuel_type_id": "9E275814-3A10-311C-B584-FCE848D5999C",
					"status": 1,
					"cars_status": 1,
					"displacement_id": "F4731CB7-1DCB-F07E-E7AA-D0BE3D090AD1",
					"case_id": "376125FD-3076-BB11-1131-7B972F2CB0F2",
					"seat_id": "0AFB3C5A-BC5F-FAEE-4234-9C4A9E0D5CE1",
					"province_has_one": {
						"id": "E20AD5D9-D9EB-A977-8F04-F8507DD88BF2",
						"name": "天津"
					},
					"re_province_has_one": {
						"id": "3A7B7BC9-F73F-5950-3EAB-7E0110B36677",
						"name": "石家庄"
					},
					"nature_has_one": {
						"id": "75C47DBF-F2A5-D571-6B62-60A0AD9133ED",
						"name": "租赁非营运"
					},
					"source_has_one": {
						"id": "ABFB4A75-73CB-C836-D577-C23B2C6EB180",
						"name": "车商"
					},
					"standard_has_one": {
						"id": "7547266D-E1D0-F3D2-4764-5D7896ABF5FE",
						"name": "国伍"
					},
					"structure_has_one": {
						"id": "CB1A053B-6BEA-9C1E-DFD7-D23BA32AFFEE",
						"name": "SUV"
					},
					"fuel_type_has_one": {
						"id": "9E275814-3A10-311C-B584-FCE848D5999C",
						"name": "燃油"
					},
					"displacement_has_one": {
						"id": "F4731CB7-1DCB-F07E-E7AA-D0BE3D090AD1",
						"name": "2.0T"
					},
					"case_has_one": {
						"id": "376125FD-3076-BB11-1131-7B972F2CB0F2",
						"name": "双离合变速箱"
					},
					"seat_has_one": {
						"id": "0AFB3C5A-BC5F-FAEE-4234-9C4A9E0D5CE1",
						"name": "7座"
					},
					"cars_name": "奥迪 奥迪A4L 2022 款 改款 xDrive 30Li M运动套装",
					"guide_price": "61.20",
					"purchase_tax": "1.52",
					"car_age": "1年",
					"business": {
						"type_name": "个人",
						"name": "名称",
						"imageurl": "https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
					},
					"collect": 1
				},
			}
		},
		methods: {
			headerClick(inta){
				this.temp = inta
			}
		}
	}
</script>

<style>
	.header {
		/* 不放大不缩小固定100rpx */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		position: fixed;
		top: 10;
		width: 100%;
		height: 100rpx;
		z-index: 11;
	}
	
	.config-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
	}
	
	.headerTitle-selected {
		font-size: 36rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		padding: 5rpx 30rpx;
	}
	
	.headerTitle {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		padding: 5rpx 30rpx;
	}
	
	
	.share-box {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 0rpx 28rpx;
		
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #1D2125;
		opacity: 1;
	}
	
	.image-icon-class {
		width: 54rpx;
		height: 54rpx;
		margin-right: 14rpx;
	}
	
	.page-view{
		/* 父元素设置相对定位 */
		position: relative;
	}
	
	.pageView{
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 100rpx;
		width: 100%;
	}
</style>
